<template>
  <div class="app">
    <div class="app-title">
      <img src="@/assets/title.png">
      <div class="control">
        <img v-if="sound" src="@/assets/soundon.png" @click="sound = false">
        <img v-else src="@/assets/soundoff.png" @click="sound = true">
      </div>
    </div>
    <llgl-game ref="game" :size="48" :sound="sound" class="game" />
    <div class="toolbar">
      <div class="button" @click="handleStart">开始游戏</div>
      <div class="button" @click="handleShuffle">洗牌</div>
    </div>
  </div>
</template>

<script>
import LlglGame from './components/LlglGame.vue'
import LoveMap from './LoveMap.json'
export default {
  name: 'App',
  components: {
    LlglGame
  },
  data() {
    return {
      sound: true
    }
  },
  methods: {
    handleStart() {
      const map = LoveMap//[{ x: 0, y: 0, z: 0 }, { x:8, y:0, z: 0 }, { x:16, y:0, z: 0 }, { x:24, y:0, z: 0 }, { x:8, y:8, z: 0 }, { x:20, y:12, z: 100 }, { x:4, y:4, z: 100 }, { x: 4, y: 0, z: 200 }, { x:20, y:0, z: 200 }]
      this.$refs.game.start(map, [9, 9, 6, 6, 6, 6, 6, 6, 9, 9, 6, 3, 9, 6])
      // this.$refs.game.start(map, [9])
    },
    handleShuffle() {
      this.$refs.game.shuffle()
    }
  }

}
</script>

<style>
html, document, body {
  padding: 0;
  margin: 0;
  height: 100%;
}
body {
  background: url(@/assets/background.webp) no-repeat;
}
.app-title {
  text-align: center;
  width: 342px;
  margin: 0 auto;
}
.game {
  padding: 3px;
  width: 342px;
  height: 438px;
  margin: 0 auto;
  border: 1px #aaa solid;
  border-radius: 8px;
}
.toolbar {
  text-align: center;
  margin: 10px 0;
}
.button {
  background: url(@/assets/button.png);
  width: 165px;
  height: 67px;
  line-height: 67px;
  text-align: center;
  color: white;
  font-size: 32px;
  cursor: pointer;
  display: inline-block;
  margin: 5px;
}
.button:active {
  background: url(@/assets/button2.png);
}
.control {
  float: right;
  padding: 15px 0 0 0;
}
</style>
